<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" user-scalable="no">
    <style>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
        }

        ul {
            margin: 0 auto;
            overflow: hidden;
            display: inline-block;
            line-height: 50px;
            font-weight: bold;
        }

        ul > li {
            list-style: none;
            float: left;
            background-color: #7e7ee0;
            width: 100px;
            height: 50px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div>
    <ul id="ul">
        <li><span>1</span></li>
        <li><span>2</span></li>
        <li><span>3</span></li>
        <li><span>4</span></li>
        <li><span>5</span></li>
    </ul>
</div>
<script>

    function triggerEvent(event, target, fn, selector) {
        selector.addEventListener(event, e => {
            let t = e.target;
            while (t.parentNode.nodeName !== "BODY") {
                if (t.nodeName.toLowerCase() === target.toLowerCase()) {
                    fn.call(t)
                    break
                }
                t = t.parentNode;
            }
        })
    }

    triggerEvent('click', 'li', () => {
        console.log("li")
    }, document.getElementById("ul"))
</script>
</body>
</html>
